<template>
<div>
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">视频上传：</p>
            <div class="weui-uploader__info">0/1</div>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles-video">
                <li class="weui-uploader__file weui-uploader__file_status"
                    style="background-image:url('/static/img/pic_160.png')">
                    <div class="weui-uploader__file-content">
                        <i class="weui-icon-warn"></i>
                    </div>
                </li>
                <li class="weui-uploader__file weui-uploader__file_status"
                    style="background-image:url('/static/img/pic_160.png')">
                    <div class="weui-uploader__file-content">50%</div>
                </li>
            </ul>
            <div class="weui-uploader__input-box">
                <input id="uploaderInput-video"
                       class="weui-uploader__input"
                       type="file"
                       accept=".mp4,.rmvb,.avi,.MP4,.RMVB,.AVI"
                       multiple/>
            </div>
        </div>
    </div>
    <div class="weui-gallery" id="gallery-video">
        <span class="weui-gallery__img" id="galleryImg-video"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
</div>
</template>

<script>
  export default {
    mounted(){
      var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
        $gallery = $("#gallery"), $galleryImg = $("#galleryImg-video"),
        $uploaderInput = $("#uploaderInput-video"),
        $uploaderFiles = $("#uploaderFiles-video");

      $uploaderInput.on("change", function (e) {
        var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
        for (var i = 0, len = files.length; i < len; ++i) {
          var file = files[i];

          if (url) {
            src = url.createObjectURL(file);
          } else {
            src = e.target.result;
          }
          $uploaderFiles.append($(tmpl.replace('#url#', src)));
        }
      });
      $uploaderFiles.on("click", "li", function () {
        $galleryImg.attr("style", this.getAttribute("style"));
        $gallery.fadeIn(100);
      });
      $gallery.on("click", function () {
        $gallery.fadeOut(100);
      });
    }
  }
</script>

<style lang="less">
    @import '../assets/css/weui-uploader.less';
</style>
